<template>
	<div class="top-right-btn" :style="style">
		<el-row>
			<el-popover placement="bottom" width="360" trigger="click">
				<DocumentShow :fileVedioList="fileListDoc" />
				<el-tooltip slot="reference" v-show="documentShow" class="item" effect="dark" content="文档说明" placement="top">
					<el-button size="mini" circle icon="el-icon-s-order" />
				</el-tooltip>
			</el-popover>
			<el-popover placement="bottom" width="360" trigger="click">
				<DocumentShow :fileVedioList="fileListVideo" />
				<el-tooltip slot="reference" v-show="documentShow" class="item" effect="dark" content="视频" placement="top">
					<el-button size="mini" circle icon="el-icon-video-camera" />
				</el-tooltip>
			</el-popover>
			<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
				<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="刷新" placement="top">
				<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
				<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
			</el-tooltip>
		</el-row>
		<el-dialog :title="title" :visible.sync="open" append-to-body width="600px" v-dialogDrag>
			<el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
		</el-dialog>
	</div>
</template>
<script>
import { menulist, OperationVideoMenuList } from "@/api/fileVedio/fileVedios"
import { getcolumn, updatecolumn } from "@/api/selectList"
import DocumentShow from "@/views/components/DocumentShow"
export default {
	name: "RightToolbar",
	components: { DocumentShow },
	data() {
		return {
			fileVedioList: [],
			showfileListDialog: false,
			showTodoListDialog: false,
			// 权限
			documentShow: true,
			videoShow: true,
			// 显隐数据
			value: [],
			// 弹出层标题
			title: "显示/隐藏",
			// 是否显示弹出层
			open: false,
			fileListDoc: [],
			fileListVideo: []
		}
	},
	props: {
		showSearch: {
			type: Boolean,
			default: true
		},
		columns: {
			type: Array
		},
		search: {
			type: Boolean,
			default: true
		},
		gutter: {
			type: Number,
			default: 10
		},
		menuNames: {
			type: String,
			default: "",
			required: false
		},
		perm: {
			type: String,
			default: "defaultstr"
		}
	},
	computed: {
		style() {
			const ret = {}
			if (this.gutter) {
				ret.marginRight = `${this.gutter / 2}px`
			}
			return ret
		}
	},
	mounted() {
		this.getcolumnsVisible()
		if (this.menuNames) {
			/**此处用于获取显隐列，并传递到父属性上 */
			getcolumn({ pageName: this.menuNames }).then(response => {
				let myColumns = response.data
				if (response.data === undefined || myColumns.length !== this.columns.length) return
				this.$emit("update:columns", myColumns)
			})
		}
	},
	created() {
		let allperm = this.$store.getters.permissions
		this.handlePerm(allperm)
		this.getLists()
	},
	methods: {
		getcolumnsVisible() {
			// this.value 里面存储的是隐藏的值
			// 显隐列初始默认隐藏列
			for (let item in this.columns) {
				if (this.columns[item].visible === false) {
					this.value.push(parseInt(item))
				}
			}
			// getcolumn({ pageName: this.menuNames }).then(res => {
			// 	if (res.data.length == 0) {
			// 		this.value = []
			// 	} else {
			// 		for (let item in res.data) {
			// 			if (res.data[item].visible === false) {
			// 				this.value.push(parseInt(item))
			// 			}
			// 		}
			// 	}
			// })
		},
		// 搜索
		toggleSearch() {
			this.$emit("update:showSearch", !this.showSearch)
		},
		// 刷新
		refresh() {
			this.$emit("queryTable")
		},
		// 右侧列表元素变化
		dataChange(data) {
			for (let item in this.columns) {
				const key = this.columns[item].key
				// data.includes(key) 为true   隐藏  在右侧
				// this.columns[item].visible为false  在右侧
				this.columns[item].visible = !data.includes(key)
			}

      if(this.menuNames){updatecolumn(this.menuNames, this.columns).then(res => {})}

			this.$emit("changeTableData")
		},
		// 打开显隐列dialog
		showColumn() {
			this.open = true
			this.getcolumnsVisible()
		},

		// 文档和视频
		getbindFiles(status) {
			menulist().then(response => {
				response.data.forEach(item => {
					if (item.perms == this.perm) {
						OperationVideoMenuList({
							menuId: item.menuId,
							type: status
						}).then(res => {
							if (status == 1) {
								this.fileListDoc = res.rows
							} else if (status == 2) {
								this.fileListVideo = res.rows
							}
						})
					}
				})
			})
		},
		getLists() {
			this.getbindFiles(1)
			this.getbindFiles(2)
		},
		// 权限
		handlePerm(allperm) {

			let perm = this.perm
      console.log(perm)
			if (perm == "defaultstr") {
				this.documentShow = false
				this.videoShow = false
			} else {
				if (allperm.indexOf("*:*:*") > -1) {
					return false
				} else {
					if (allperm.indexOf(perm + ":doc") == -1) {
						this.documentShow = false
					}
					if (allperm.indexOf(perm + ":video") == -1) {
						this.videoShow = false
					}
				}
			}
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-transfer-panel__header {
	.el-checkbox__input {
		margin-left: 15px !important;
	}
}
::v-deep .el-transfer__button {
	border-radius: 50%;
	padding: 12px;
	display: block;
	margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
	margin-bottom: 10px;
}
</style>
